<template>
  <div
    class="goodlistitem"
    @click="itemClick"
    v-if="Object.keys(goodsItem).length !== 0"
  >
    <!-- <a :href="goodsItem.link"></a> -->
    <img :src="showImage" alt="" />
    <div>
      <p>{{ goodsItem.title }}</p>
    </div>
    <div class="price">
      <span>￥{{ goodsItem.price }}</span>
      <img src="~assets/image/detail/cang.png" alt="" />
      <span>{{ goodsItem.cfav }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "GoodListItem",
  props: {
    goodsItem: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    showImage() {
      return (
        this.goodsItem.img || this.goodsItem.show.img
        // this.goodsItem.image ||
        //
      );
    },
  },
  methods: {
    itemClick() {
      this.$router.push("/detail/" + this.goodsItem.iid);
    },
  },
};
</script>
<style scoped>
.goodlistitem {
  padding-left: 2%;
  float: left;
  width: 49%;
}
.goodlistitem img {
  width: 100%;
}
.goodlistitem p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goodlistitem .price {
  padding: 4px 0;
  text-align: center;
}
.goodlistitem .price img {
  width: 16px;
  vertical-align: bottom;
}
.goodlistitem .price span:first-child {
  color: red;
  padding-right: 5px;
}
</style>